import React, { Component } from "react";
//引入组件
import Footer from "../Footer/Footer";
//引入react-redux包
import { connect } from "react-redux";
//引入store
import { async_request_action } from "../../store/store";
import List from "../List/List";
//引入react-router-dom包
import { NavLink, Switch, Redirect, Route } from "react-router-dom";
class Home extends Component {
    componentDidMount() {
        this.props.get_data();
    }
    render() {
        return (
            <div className="home">
                <div className="main">
                    <div className="nav">
                        {this.props.allList.map((item, index) => {
                            return (
                                <NavLink
                                    to={{
                                        pathname: `/home/${index}`,
                                        state: item.children
                                    }}
                                    key={item.key}
                                >
                                    {item.navTitle}
                                </NavLink>
                            );
                        })}
                    </div>
                    <Switch>
                        <Route path="/home/:index" component={List}></Route>
                        {this.props.allList.length > 0 && (
                            <Redirect
                                to={{
                                    pathname: "/home/0",
                                    state: this.props.allList[0].children
                                }}
                            ></Redirect>
                        )}
                    </Switch>
                </div>
                <Footer></Footer>
            </div>
        );
    }
}
export default connect(
    state => {
        return {
            allList: state.allList
        };
    },
    dispatch => {
        return {
            get_data() {
                dispatch(async_request_action());
            }
        };
    }
)(Home);
